<style scoped>
  .futuristic-pattern {
    width: 100%;
    height: 100%;
    background: linear-gradient(
      145deg,
      rgba(255, 215, 0, 0.95),
      rgba(236, 168, 9, 0.95),
      rgba(255, 140, 0, 0.95)
    );
    filter: url(#advanced-texture);
  }
</style>

<template>
  <div class="futuristic-pattern">
    <span class="ripple-overlay"></span>
    <svg class="texture-filter">
      <filter id="advanced-texture">
        <feTurbulence
          result="noise"
          numOctaves="3"
          baseFrequency="0.7"
          type="fractalNoise"
        ></feTurbulence>
        <feSpecularLighting
          result="specular"
          lighting-color="#fff"
          specularExponent="20"
          specularConstant="0.8"
          surfaceScale="2"
          in="noise"
        >
          <fePointLight z="100" y="50" x="50"></fePointLight>
        </feSpecularLighting>
        <feComposite
          result="litNoise"
          operator="in"
          in2="SourceGraphic"
          in="specular"
        ></feComposite>
        <feBlend mode="overlay" in2="litNoise" in="SourceGraphic"></feBlend>
      </filter>
    </svg>
  </div>
</template>
